TanStack Start

TanStack Router
- 중첩 라우팅, 검색 매개변수, 데이터 로딩과 같은 고급 기능을 갖춘 웹 애플리케이션 구축을 위한 타입 안전 라우터
Vite
- Hot Module Replacement를 통한 빠른 개발과 최적화된 프로덕션 빌드를 제공하는 현대적인 빌드 도구

쉽게말하면, TanStack Start는 TanStack Router를 중심으로 SSR, 스트리밍, 서버 액션 등을 결합한 풀스택 프레임워크라고 할 수 있습니다.

즉, SPA처럼 부드럽고 빠른 사용자 경험을 유지하면서도, 필요한 경우 SSR·스트리밍·서버 액션을 유연하게 활용할 수 있는 것이죠.

그렇다면 "기존에 TanStack Router를 사용하던 사람들은 TanStack Start로 넘어가는게 좋을까?" 라는 의문이 생길 수 있습니다.

이 질문에 대해 TanStack 공식 문서에는 아래와 같이 답변하고 있습니다.

어떤 프레임워크든 90%는 보통 라우터에 달려있으며, TanStack Start도 다르지 않습니다.
TanStack Start는 라우팅 시스템을 위해 100% TanStack Router에 의존합니다.
TanStack Router의 놀라운 기능들에 더해, Start는 훨씬 더 강력한 기능들을 가능하게 합니다.

정리해보면, TanStack Router만을 사용해서 원하는 기능의 애플리케이션을 구축하는데 문제가 없었다면 굳이 TanStack Start로 넘어갈 필요는 없습니다.

하지만 TanStack Start가 제공하는 강력한 기능들이 필요하다면, TanStack Start로 전환하는 것을 고려해볼 만하다는 것이죠.

TanStack Start의 특징 📌

그렇다면 TanStack Start의 특징은 무엇일까요?

TanStack Start는 아래와 같이 강력한 기능들을 제공합니다.

전체 문서 SSR
- 전체 페이지를 서버에서 미리 렌더링하여 SEO 최적화와 빠른 초기 로딩 제공
스트리밍 렌더링
- 일부 데이터가 지연되어도 준비된 부분부터 점진적으로 렌더링
서버 라우트 & API 라우트
- 프론트엔드와 통합된 백엔드 API 엔드포인트 구축
서버 함수(Server Functions)
- 클라이언트에서 호출하지만 서버에서 안전하게 실행되는 함수
미들웨어 & 컨텍스트
- 강력한 요청/응답 처리 및 데이터 주입
풀스택 번들링
- 클라이언트와 서버 코드 모두를 위한 최적화된 빌드
범용 배포
- Vite 호환 호스팅 제공자 어디든 간편하게 배포 가능
엔드투엔드 타입 안전성
- 프론트엔드부터 백엔드까지 완전한 TypeScript 타입 지원

위 기능들을 보면 알겠지만, 웹 애플리케이션 개발에 필요한 대부분의 기능들이 다 포함되어 있다고 볼 수 있습니다.

⚠️ TanStack Start의 제약사항
TanStack Start는 현재 React Server Components(RSC)를 지원하지 않습니다.
하지만 적극적으로 통합 작업을 진행하고 있으며 가까운 미래에 이를 지원할 것이라고 합니다.

TanStack Start vs 기존 프레임워크 📝

그럼 TanStack Start와 기존 프레임워크들과의 차이점은 무엇일까요?

아래 표는 Next.js, Remix와 TanStack Start의 각 특징을 비교하여 정리해본 것입니다.

특징	Next.js	Remix	TanStack Start
철학	서버와 클라이언트를 통합한 올인원 프레임워크	서버 중심(Server-first)	클라이언트 중심(Client-first)
데이터 로딩	React Server Components + Fetch API	Loader & Action 함수 기반	TanStack Query + Server Functions
SSR/스트리밍	SSR + RSC 스트리밍	SSR + 점진적 스트리밍	SSR + 점진적 스트리밍
타입 안전성	부분적(TypeScript 지원)	제한적	강력한 타입 안전성 (URL-as-state, 함수 호출)
생태계	가장 크고 안정적, Vercel 최적화	아직 작지만 실무 채택 있음	신생 단계 (v1 RC), 실험적
적합한 프로젝트	대규모 프로덕션, SEO 최적화가 중요한 서비스	서버 중심 아키텍처, 데이터 우선 접근	프론트엔드 지향 앱, DX·유연성을 중시하는 팀

위 표에서 볼 수 있듯이 각 프레임워크는 철학과 접근 방식에서부터 데이터 로딩, 타입 안전성, 생태계까지 다양한 측면에서 차이를 보입니다.

Next.js vs TanStack Start

Next.js는 React Server Components(RSC) 기반으로 구축되어 있으며, Vercel에 최적화되어 있고 엔터프라이즈급 안정성을 제공합니다.

반면 TanStack Start는 더 가벼운 구조를 가지고 있으며, 타입 안전성과 라우터 중심의 개발자 경험(DX)에 집중하고 있습니다.

즉, Next.js가 모든 기능을 포함한 거대한 종합 프레임워크라면, TanStack Start는 필요에 따라 기능을 조합할 수 있는 유연한 라우터 중심 툴킷이라고 할 수 있습니다.

Remix vs TanStack Start

Remix는 서버 중심(Server-first) 접근 방식을 채택하여, 모든 데이터 로딩과 액션이 서버에서 시작됩니다.

이와 달리 TanStack Start는 클라이언트 중심(Client-first) 접근 방식을 취하며, 필요한 경우에만 서버 기능을 삽입하는 방식으로 동작합니다.

즉, Remix가 백엔드 지향적인 사고방식으로 설계되었다면, TanStack Start는 프론트엔드 지향적인 관점에서 개발된 프레임워크라고 볼 수 있는 것이죠.

이러한 각 프레임워크의 차이점을 잘 이해하고, 프로젝트의 요구사항과 팀의 선호도에 맞게 적절한 프레임워크를 선택하는 것이 중요합니다.

TanStack Start 사용 방법 ⌨️

그렇다면 TanStack Start는 어떻게 사용해야 할까요?

먼저 우리가 익숙한 create-react-app, create-next-app처럼,

TanStack Start도 create-start-app이라는 CLI(Command Line Interface)를 제공합니다.

아래와 같이 create-start-app을 사용해서 새로운 TanStack Start 프로젝트를 생성할 수 있습니다.

npx create-start-app@latest my-app

이후 아래 명령어를 통해 프로젝트 디렉토리로 이동한 후, 의존성 패키지들을 설치하고 개발 서버를 실행합니다.

cd my-app
npm intall
npm run dev

그러면 아래 화면과 같이 우리가 만든 TanStack Start 앱이 localhost:3000에서 실행되는 것을 볼 수 있습니다.

TanStack Start 앱 실행화면

Route 추가하기

/about 경로에 대한 Route를 추가하는 예시는 다음과 같습니다.

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/about')({
    component: RouteComponent,
});

function RouteComponent() {
    return <div>Hello "/about"!</div>;
}

Server Functions 만들기

Server Functions는 애플리케이션 어디서든 호출할 수 있는 서버 전용 로직을 정의할 수 있게 해주는 기능입니다.

로더, 컴포넌트, 훅, 또는 다른 서버 함수에서 호출할 수 있으며, 서버에서 실행되지만 클라이언트 코드에서 원활하게 호출할 수 있습니다.

Server Functions는 네트워크 경계를 넘어서도 타입 안전성을 유지하면서 서버 기능(데이터베이스 접근, 환경 변수, 파일 시스템)을 제공합니다.

아래 코드는 Server Functions를 정의하는 예시 코드 입니다.

import { createServerFn } from '@tanstack/react-start';

// GET request (default)
export const getData = createServerFn().handler(async () => {
    return { message: 'Hello from server!' };
});

// POST request
export const saveData = createServerFn({ method: 'POST' }).handler(async () => {
    return { success: true };
});

Server Routes 만들기

Server Routes는 TanStack Start의 강력한 기능 중 하나로, 애플리케이션에서 서버 사이드 엔드포인트를 생성할 수 있게 해줍니다.

이는 HTTP 요청 처리, 폼 제출, 사용자 인증 등 다양한 용도로 활용할 수 있습니다.

Next.js를 사용해본 분들은, Next.js의 Route Handlers와 유사한 개념이라고 이해하면 됩니다.

아래 코드는 간단한 Server Route 예시 코드 입니다.

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/api/demo-names')({
    server: {
        handlers: {
            GET: () => {
                return new Response(
                    JSON.stringify(['Alice', 'Bob', 'Charlie']),
                    {
                        headers: {
                            'Content-Type': 'application/json',
                        },
                    }
                );
            },
        },
    },
});

마치며 ✨

TanStack Start는 아직 v1 RC(Release Candidate) 단계입니다.

그래서 Next.js처럼 프로덕션용으로 곧바로 사용하기에는 조금 이르다고 할 수 있습니다.

하지만 DX 중심의 차세대 풀스택 프레임워크로서 충분히 매력적인 가능성을 보여주고 있습니다.

특히, 클라이언트 중심 개발 경험을 중시하는 팀이나 타입 안전성과 라우터 기반 DX를 선호하는 개발자, 그리고 Next.js/RSC에 락인되지 않는 대안을 찾는 분들에게는 좋은 선택이 되지 않을까 싶습니다.

TanStack Query가 데이터 페칭의 패러다임을 바꿨던 것처럼, TanStack Start가 풀스택 리액트 개발 경험을 다시 쓰게 될지 기대됩니다 😎

🔗 참고 링크

이번 매거진에서는 TanStack Start에 대해 알아보았습니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀

지금 가입하고 프론트엔드 개발 관련 매거진을 이메일로 받아보세요!